<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="CSS 下拉滑动 菜单">
    <!-- 源码CSS link -->
    <link rel="stylesheet" href="dropdown.css">

    <title>Document</title>
    <style>
        .menu_container ul li{
            /* 取消 圆点 */
            list-style-type: none;
            color: blanchedalmond;
        } 
        .menu_container{
            /* 最外层盒子 宽度 位置对齐 */
            width: 100%;
            margin: 0 auto;
            text-align: center;
            
        }
        .menublock>li{
            /* 菜单盒子 内 所有 li标签 */
            padding: 10px;
            /* 设置浮动，li是块元素 */
            float: left;
            width: 33.333%;
            text-align: center;
            background-color: black;
            font-size: 18px; 
        }
         .menu_headtitle:hover .drop_menu{
            /* 鼠标 放置 下拉菜单时 的展开长度！！！ */
            height: 150px;
            /* 显示层级-此处好像无用 */
            /* z-index: -1; */
        }
        .drop_menu{
            /* 要 展开的下拉菜单 */
            /* 必须设置！！ */
            height: 0px;
            /* 隐藏溢出 */
            overflow: hidden;
            /* 动画 */
            transition: 0.5s;
            /*  */
            /* background-color: transparent; */
        }
        .drop_menu li{
            /* 展开菜单的子项 */
            line-height: 50px;
            text-align: center;
            font-size: 18px;
        }
        /**/
        .menu_container a{
            color: rgb(230, 230, 230);
            text-decoration: none;            
        }
        a:hover{
            color: tomato;
            font-weight: bold;
        }

    </style>
</head>
<body>
    
    <!--源码示例-->
    <nav>
        <div class="wrap">
            <ul class="menu">
                <li><a href="">首页</a></li>
              
                <li class="boa">
                    <a href="">娱乐</a>
                    <ul class="box">
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                    </ul>
                </li>
              
                <li class="boa">
                    <a href="">财经</a>
                    <ul class="box">
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                    </ul>
                </li>
              
                <li class="boa">
                    <a href="">科技</a>
                    <ul class="box">
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                        <li>二级菜单</li>
                    </ul>
                </li>
              
            </ul>
        </div>
    </nav>
    <!--源码示例-->

    <!--仿写实例-->
    <!--issue:碰到菜单栏任意位置，二级菜单就下滑了-->
    <nav>
        <div class="menu_container">
        <ul class="menublock">
            <li><a href="">one</a></li>
            <li class="menu_headtitle">
                <a href="">two</a>
                <ul class="drop_menu">
                <li><a href="">two-one</a></li>
                <li><a href="">two-two</a></li>
                <li><a href="">two-third</a></li>
                </ul>
            </li>
            <li><a href="">third</a></li>
        </ul>
        </div>
    </nav>
    <!--仿写实例-->
</body>
</html>